import React, { Component, useState,useRef } from "react";
import "./index.css";
export default function List() {
  let uid = "53251";
  let [value, setValue] = useState("");
  let iptRef = useRef()
  const [list, setList] = useState([
    {
      uid: "53253",
      content: "不错了",
      time: "10-23",
    },
    {
      uid: "53251",
      content: "起风了",
      time: "10-21",
    },
    {
      uid: "53423",
      content: "那就这样把",
      time: "10-24",
    },
    {
      uid: "53553",
      content: "不等了",
      time: "10-23",
    },
  ]);
  let delHandler = (uid) => {
    console.log(uid, "e");
    setList(
      list.filter((item) => {
        return item.uid !== uid;
      })
    );
  };
  let [flag, setFlag] = useState("hot");
  let publishHandle = () => {
    let obj = { uid: Date.now(), content: value, time: Date.now() };
    console.log(obj,value);
    setList([...list,obj]);
    setValue('')
    iptRef.current.focus()

  };
  return (
    <>
      <h1>列表渲染</h1>
      <input
        value={value}
        ref={iptRef}
        onInput={(e) => setValue(e.target.value)}
        type="text"
      />
      <button onClick={publishHandle}>发布按钮</button>
      <ul>
        <li
          onClick={() => setFlag("hot")}
          className={`${flag === "hot" && "active"}`}
        >
          最热
        </li>
        <li
          onClick={() => setFlag("new")}
          className={`${flag === "new" && "active"}`}
        >
          最新
        </li>
      </ul>
      {list.map((item, index) => (
        <div key={item.uid}>
          <p>{item.content}</p>
          <p>
            time:{item.time}{" "}
            {uid === item.uid && (
              <button onClick={() => delHandler(uid)}>删除</button>
            )}
          </p>
        </div>
      ))}
    </>
  );
}
